<template>
    <el-card class="reservation-card">
        <div class="card-image" v-if="reservation.locationPhoto">
            <img :src="reservation.locationPhoto" alt="Location Image" />
        </div>
        <div class="card-content">
            <p><strong>创建时间:</strong> {{ formattedCreateTime }}</p>
            <p><strong>预约时间:</strong> {{ formattedReservationTime }}</p>
            <p><strong>预约地点:</strong> {{ reservation.locationName }}</p>
            <p><strong>预留电话:</strong> {{ reservation.userPhone }}</p>
            <p><strong>预约状态:</strong> <span class="status">{{ reservation.type }}</span></p>
        </div>
    </el-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    reservation: {
        type: Object,
        required: true
    }
});

// 格式化创建时间
const formattedCreateTime = computed(() => {
    return new Date(props.reservation.createTime).toLocaleString(); // 根据需要调整格式
});

// 格式化预约时间
const formattedReservationTime = computed(() => {
    return new Date(props.reservation.time).toLocaleString(); // 根据需要调整格式
});
</script>

<style scoped>
.reservation-card {
    width: 100%;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    overflow: hidden; /* 防止内容溢出 */
    transition: transform 0.2s; /* 平滑悬停效果 */
}

.card-image {
    width: 100%;
    height: 150px; /* 适当的高度 */
    overflow: hidden; /* 隐藏超出部分 */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例，并裁剪 */
    transition: transform 0.3s; /* 图像悬停效果 */
}

.card-image img:hover {
    transform: scale(1.05); /* 悬停时放大效果 */
}

.card-content {
    padding: 20px;
    background: #f9f9f9; /* 背景色 */
}

.card-title {
    margin: 0 0 10px 0; /* 标题下边距 */
    font-size: 20px; /* 用较大的字体 */
    color: #333; /* 标题颜色 */
}

.status {
    font-weight: bold; /* 状态加粗 */
    color: #ff6600; /* 预约状态颜色 */
    text-transform: capitalize; /* 首字母大写 */
}

/* 弹出效果 */
.reservation-card:hover {
    transform: translateY(-5px); /* 悬停时向上浮动 */
}
</style>
